<template>
	<view>
		<image src="../../static/bei.png" style="top: 0;z-index: 1;width: 100%;" class="u-p-a" mode="widthFix"></image>
		<view class="u-p-r" style="z-index: 2;">
			<u-navbar title="登录" placeholder bg-color="transparent" titleStyle="color:#fff">
				<view slot="left"></view>
			</u-navbar>
			<u-gap height="30rpx"></u-gap>
			<view style="padding: 52rpx;">
				<view class="u-flex" style="align-items: flex-end;">
					<view class="u-f-48 u-bold u-m-r-8">
						您好，<br/>
						欢迎使用
					</view>
					<image src="../../static/name.png" style="width: 220rpx;height: 66rpx;"></image>
				</view>
			</view>
			<u-gap height="67rpx"></u-gap>
			<view style="margin-top: -30rpx;" class="u-p-30 u-r-30 u-bg-fff">
				<view class="inp">
					<view class="u-flex-y-center" style="width: 140rpx;">
						<view class="u-f-32 u-m-r-10">+86</view>
						<u-icon name="arrow-down"></u-icon>
					</view>
					<input placeholder="请输入手机号" class="u-flex-1" 	v-model="regPhone.username" type="number">
				</view>
				<view class="inp">
					<view class="u-flex-y-center" style="width: 140rpx;">
						验证码
					</view>
					<input placeholder="请输入验证码" class="u-flex-1" 	v-model="regPhone.smscode" type="number"/>
					<view class="u-f-32" style="color: #209920;">
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<text @tap="getCode">{{tips}}</text>
					</view>
				</view>
				<view class="inp">
					<view class="u-flex-y-center" style="width: 140rpx;">
						昵称
					</view>
					<input placeholder="请输入昵称" class="u-flex-1" v-model="regPhone.nickname" />
					
				</view>
				<!-- <view class="inp">
					<view class="u-flex-y-center" style="width: 140rpx;">
						地址
					</view>
					<input placeholder="请输入地址" class="u-flex-1" v-model="regPhone.address" />
					
				</view> -->
				<u-gap height="60rpx"></u-gap>
				<view class="appBtn" @click="regPhoneSubmit"> 注册</view>
				<view class="appBtn u-m-t-30" style="background: #fff;color: #209920;" @click="back">登录</view>
			</view>
		</view>
		<view class="u-text-center u-f-24 u-m-t-24 u-p-a" style="bottom: 80rpx;left:50%;transform: translate(-50%);width: 100%;">
			<checkbox style="transform: scale(0.8);" :checked="isTrue" @click="isTrue=!isTrue"></checkbox>
			请阅读协议<text style="color: #209920;"
				 @click="$u.route('pages/login/agree',{type:'use'})" >《用户协议》</text>和<text
				style="color: #209920;"
				 @click="$u.route('pages/login/agree',{type:'privacy'})" >《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 60,
				regPhone: {
					username: null,
					nickname: null,
					smscode: null,
					address: null,
					is_check: 0
				},
				isTrue:false,
				openid:'',
				session_key:'',
				unionid:'',
				platform:''
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
				let _this = this
				uni.login({
				  provider: 'weixin', //使用微信登录
				  success: e => {
					let code = e.code;
					console.log(code)
					uni.$u.http.post('Login/getOpenid', {
						code: code,
						
					}).then(res => {
						_this.openid = res.openid
						_this.session_key = res.session_key
						_this.unionid = res.unionid
					})
				  }
				});
			// #endif
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			codeChange(text) {
				this.tips = text;
			},
			async regPhoneSubmit() {
				if(this.isTrue == false){
					return uni.$u.toast('请阅读协议');
				}
				if(!this.regPhone.username) return uni.$u.toast('请输入手机号');
				if(!this.regPhone.smscode) return uni.$u.toast('请输入验证码');
				if(!this.regPhone.nickname) return uni.$u.toast('请输入昵称');
				this.regPhone.openid=this.openid
				this.regPhone.unionid=this.unionid
				let res = await uni.$u.http.post('login/register', this.regPhone)
				uni.setStorageSync('userInfo', res)
				uni.setStorageSync('token', res.token)
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			async getCode() {
				if(this.isTrue == false){
					return uni.$u.toast('请阅读协议');
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let param = {
						mobile:this.regPhone.username,
						type:'register'
					}
					await uni.$u.http.post('/sms/sendcode', param)
						
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
						
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style>
		.inp{
			padding-top: 66rpx;
			padding-bottom: 40rpx;
			border-bottom: 1px solid #e2e2e2;
			display: flex;
			align-items: center;
		}
		
</style>
